/*
描述：用户中心主视图组件，展示用户个人信息和推荐问题
完成人：吴悠
完成时间: 2025/04/27
*/



<script setup lang="ts">

import axios from 'axios';
import { ref, onMounted } from 'vue';
import HeaderComponent from "../components/HomeView/HeaderComponent.vue";
import RecentQuestion from '../components/HomeView/RecentQuestion.vue';
import QuestionComponent from "@/components/HomeView/QuestionComponent.vue";
import MyNavbar from '@/components/UserView/MyNavbar.vue';

interface UserInfo{
  username: string;
  password: string;
  email: string;
  nickname: string;
  avatar:string;
  enrtydate:string;
  age:number;
  gender:number;
  introduction:string;
  phone:string;
  type:number
}

let userInfo = ref<UserInfo>({
  username: '',
  password: '',
  email: '',
  nickname: '',
  avatar:'',
  enrtydate:'',
  age:0,
  gender:0,
  introduction:'',
  phone:'',
  type:0
})

const fetchUserInfo = async () => {
  const userId = localStorage.getItem('id');
  if (!userId) {
    console.error('用户ID 在localStorage没有');
    return;
  }
  try {
    const token = localStorage.getItem('token');
    const response = await axios.get(
      `http://localhost:8089/user/getUserInfo?id=${userId}`,
      {
      headers: {
        'token': token || '' // Add token to headers, handle null case
      }
    });
    if (response.data.code === 1) {
      userInfo.value = response.data.data;
      console.log("response.data",response.data)
    } else {
      console.error('Failed to fetch user info:', response.data.msg);
    }
  } catch (error) {
    console.error('Error fetching user info:', error);
  }
};

onMounted(() => {
  fetchUserInfo();
});

</script>

<template>
  <el-container>
    <HeaderComponent/>
    <el-container>
      <el-aside width="20%">
        <div class="sidebar-menu-left">
          <MyNavbar :now-page="0" />
        </div>

      </el-aside>
      <el-main class="body">
        <div class="center-up">
          <el-descriptions
              title="个人信息"
              direction="vertical"
              border
          >
            <el-descriptions-item
                :rowspan="2"
                :width="140"
                label="Photo"
                align="center"
            >
              <el-image
                  style="width: 100px; height: 100px"
                  :src="userInfo.avatar"
              />
            </el-descriptions-item>
            <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
            <el-descriptions-item label="手机号">{{userInfo.phone}}</el-descriptions-item>
            <el-descriptions-item label="昵称">{{ userInfo.nickname }}</el-descriptions-item>
            <!-- <el-descriptions-item label="身份">{{ userInfo.type==0? "普通用户":"管理员" }}</el-descriptions-item> -->
            <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ userInfo.age }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ userInfo.gender==1? "男":"女" }}</el-descriptions-item>
            <el-descriptions-item label="个人简介">
              {{ userInfo.introduction }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="center-lower">
          <a>每日问题推荐</a>
          <QuestionComponent :current-component="0"/>
        </div>
      </el-main>
      <el-aside width="20%">
        <div class="sidebar-menu-right">
          <RecentQuestion/>
        </div>
      </el-aside>
    </el-container>
  </el-container>
</template>


<style scoped>


button {
  margin: 0 10px;
  padding: 8px 16px;
  color: #e7700d;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.center-up{
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.center-lower{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  background-color: white;
  border-radius: 8px;
  padding: 20px 0 0 0;
}
.center-lower a{
  font-size: 14px;
  margin-bottom: 10px;
  color: #000000;
  font-weight: bold;
}


.body{
  height: 100%;
  padding: 84px 20px 20px 20px;
}

.sidebar-menu-left{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;  /* 元素脱离文档流，相对于浏览器窗口固定定位 */
  top: 84px;
  height: 100vh;
  margin-left: 5%;
}
.sidebar-menu-right{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;  /* 元素脱离文档流，相对于浏览器窗口固定定位 */
  top: 84px;
  height: 100vh;
}
</style>

